// webpack  是基于Node 进行构建的，所以webpack中任何合法的Node 代码都支持
var path=require('path')
//  在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部
var htmlWebpackPlugin=require('html-webpack-plugin')
//  vue 15.x  无法加载loader     可以查看链接   https://blog.csdn.net/bigfatDone/article/details/82915251
const {VueLoaderPlugin}=require('vue-loader')
module.exports={
    entry:path.join(__dirname,'./main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    plugins:[//所有插件节点
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./index.html'),//指定模板文件路径
            filename:'index.html'  //设置生成的页面名称
        }),
        new VueLoaderPlugin()
    ],
    module:{//配置所有第三方Loader  模块
        rules:[  //第三方模块匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']} ,   //处理css  文件
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},

            {test:/\.(jpg|jpeg|png|bmp|gif)$/,use:[{
                loader:'url-loader',
                options:{
                    esModule:false,  //webpack打包html里面img后src为“[object Module]”问题
                    name:"[hash:8]-[name].[ext]",
                    limit:2048
                }
            }]}, 

            // {test:/\.(jpg|jpeg|png|bmp|gif)$/,use:'url-loader?limit=13252&name=[hash:8]-[name].[ext]'}, // 处理图片路径    
            // loader可以传参，限制不使用base64,使用limit关键字，limit小于图片字节数，不适用base64  大于等于则使用
            // 图片名字  name参数 name=[name].[ext]  即使用原图片名字和类型     
            //  该命名方式存在问题，不同文件夹下的相同文件名和后缀名的图片会存在覆盖问题，
            // 解决方法，前加hash值，hash值为32为  [hash:8]表示截取前八位
            {test:/\.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader'},   //处理字体文件
            {test:/\.vue$/,use:'vue-loader'},  //处理.vue的loader
        ]
    },
    resolve:{
        alias:{//设置Vue被导入时候的包的路径
            // "vue$":"vue/dist/vue.js"
        }
    }
}